import React, { useEffect, useState } from "react";
import style from './style.module.scss'
import url from '../../../../assets/images/icon/common resource/hdpi/common_icon_back_black_n.png'
import { useLocation, useNavigate } from "react-router-dom";
import MypathienList from "../../../../components/mypathienList";
import axios from "axios";
import { pathienCirclehistoryList } from "../../../../api/patientCircle";
import { useAppDispatch, useAppSelector } from "../../../../store/hooks";
import { addpatientCircleSearchList } from "../../../../store/user/userSlice";
const Index: React.FC = () => {

  const dispatch = useAppDispatch();
  const location = useLocation();
  const navigate=useNavigate()
  const [keyWord,setKeyWord]=useState(location.state.value as string)
  const [historyList,setHistoryList]=useState<pathienCirclehistoryList[]>([])
  const searchList = useAppSelector((state) => state.user.patientCircleSearchList);
// 病友圈搜索结果接口
  const getSearchHistory=async()=>{
    const {data:{result}}=await axios.get('/health/user/sickCircle/v1/searchSickCircle',{params:{keyWord}})
    setHistoryList(result)
  }
  useEffect(()=>{
    getSearchHistory()
  },[])
  const handleSearch=()=>{
    if (keyWord!== "") {
      getSearchHistory()
      dispatch(addpatientCircleSearchList(keyWord));
    }
  }
  return <div>
    <div className={style.navbar}>
      <img src={url} alt="" onClick={()=>{
        navigate(-1)
      }}/>
      <input type="text" value={keyWord} onChange={(e)=>{
        setKeyWord(e.target.value)
      }}/>
      <button onClick={()=>{
        handleSearch()
      }}
      onKeyDown={(e)=>{
        if(e.keyCode===13)handleSearch()
      }}
      >搜索</button>
    </div>
    <div className={style.content}>
      {
        historyList.length>0&&historyList.map((v,i)=>{
          return <div key={i}>
          <MypathienList item={v}></MypathienList>
        </div>
        })
      }
    </div>
  </div>
};

export default Index;
